<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <link rel="stylesheet" href="../../static/css/public.css">
    <script src="../../static/js/jquery-3.4.1.min.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <style>
        *{
            margin-left: 60px;
        }
        .stuImage{
            display: none;
        }
        #image{
            width: 70px;
            height:70px;
        }
    </style>
</head>
<body>

<div class="login">

    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>项目</th>
            <th>内容</th>

        </tr>
        </thead>
        <tbody>
        <tr>
            <td>订单编号</td>
            <td class="orderId"></td>
        </tr>
        <tr>
            <td>包裹编号</td>
            <td class="packageId"></td>
        </tr>
        <tr>
            <td>收件时间</td>
            <td class="receiveTime"></td>
        </tr>
        <tr>
            <td>收件员编号</td>
            <td class="receiveCourierId"></td>
        </tr>
        <tr>
            <td>寄件客户编号</td>
            <td class="consignorId"></td>
        </tr>
        <tr>
            <td>收件客户编号</td>
            <td class="consigneeId"></td>
        </tr>


        <tr>
            <td>派件员编号</td>
            <td class="distributerId"></td>
        </tr>
        <tr>
            <td>预计派件时间</td>
            <td class="estiDistriTime"></td>
        </tr>


        <tr>
            <td>实际派件时间</td>
            <td class="actualDistriTime"></td>
        </tr>
        <tr>
            <td>支付类型</td>
            <td class="payType"></td>
        </tr>
        <tr>
            <td>费用</td>
            <td class="fee"></td>
        </tr>
        <tr>
            <td>支付状态</td>
            <td class="payStatus"></td>
        </tr>
        </tbody>
    </table>

    <button class="layui-btn" onclick="search()">查询物流</button>
</div>

<script>

    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    var orderId  = localStorage.getItem("orderId");

    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
    });

    function search(){
        var data1,data2,data3,data4
        $.ajax({
            url:'http://localhost:8080/deliver/warehouse/' + orderId,
            type:'GET',
            success(res){
                data1 = res;
                console.log('warehouse')
                console.log(res);
            },
            error(res){
                layer.msg("defeat", {icon: '5', time: 2000})
            },
            complete(){
                $.ajax({
                    url:'http://localhost:8080/deliver/time/' + orderId,
                    type:'GET',
                    success(res){
                        data2 = res;
                        console.log('time');
                        console.log(res);
                    },
                    error(res){
                        layer.msg("defeat", {icon: '5', time: 2000})
                    },
                    complete(){
                        $.ajax({
                            url:'http://localhost:8080/deliver/name/' + orderId,
                            type:'GET',
                            success(res){
                                data3 = res;
                                console.log('name');
                                console.log(res);
                                $('ul').append('<li class="layui-timeline-item">\n' +
                                    '            <i class="layui-icon layui-timeline-axis" style="left: -65px"></i>\n' +
                                    '            <div class="layui-timeline-content layui-text">\n' +
                                    '                <h3 class="layui-timeline-title">'+'【' +'已揽件' + '】' +rTime(data2.data)+'</h3>\n' +
                                    '                <p>\n' +
                                    '                    揽件仓库地址:' + '【' + data3.data.warehouseName + '】' +  '揽件员：' + '【' + data3.data.staffName  + '】' +
                                                        '电话：' + '【' + data3.data.staffPhone+ '】'+
                                    '                </p>\n' +
                                    '            </div>\n' +
                                    '        </li>')
                                for(var i=0; i<data1.data.length; i++){
                                    $('ul').append('<li class="layui-timeline-item">\n' +
                                                    '<i class="layui-icon layui-timeline-axis" style="left: -65px"></i>\n' +
                                                        '<div class="layui-timeline-content layui-text">\n' +
                                                            '<h3 class="layui-timeline-title">'+'【'+'运输中'+'】'+rTime(data1.data[i].arrivalTime)+'</h3>\n'+
                                                            '<p>'+'到达仓库'+'【'+data1.data[i].warehouseName+'】'+ '</p>' +
                                                        '</div>\n'+
                                                    '</li>\n'+

                                                    '<li class="layui-timeline-item">\n' +
                                                        '<i class="layui-icon layui-timeline-axis" style="left: -65px"></i>\n' +
                                                            '<div class="layui-timeline-content layui-text">\n' +
                                                                '<h3 class="layui-timeline-title">'+'【'+'运输中'+'】'+rTime(data1.data[i].departureTime)+'</h3>\n'+
                                                                '<p>'+'离开'+'【'+data1.data[i].warehouseName+'】'+'下一站'+'【'+data1.data[i].towarehouseName+ '】'+ '</p>'+
                                                            '</div>\n'+
                                                    '</li>\n'
                                        )
                                }
                            },
                            error(res){
                                layer.msg("defeat", {icon: '5', time: 2000})
                            },
                            complete(){
                                $.ajax({
                                    url:'http://localhost:8080/deliver/send/' + orderId,
                                    type:'GET',
                                    success(res){
                                        console.log('send');
                                        console.log(res);
                                        data4 = res;
                                        $('ul').append('<li class="layui-timeline-item">\n' +
                                                       '<i class="layui-icon layui-timeline-axis" style="left: -65px"></i>\n' +
                                                       '<div class="layui-timeline-content layui-text">\n' +
                                                       '<h3 class="layui-timeline-title">' + '【' + '正在派送' + '】' + '</h3>\n'+
                                                       '派件员：'+ '【' + data4.data.staffName + '】' + '正在派件，联系电话：' + '【' + data4.data.staffPhone+  '】' + '\n'
                                                        +'派送网点：'+ '【' + data4.data.warehouseName+  '】'+'网点联系电话：' + '【'  + data4.data.warehousePhone + '】'
                                        )
                                        layer.open({
                                            type: 1,
                                            title: false,
                                            closeBtn: 0,
                                            shadeClose: true,
                                            closeBtn: 2,
                                            area: ['1000px', '500px'],
                                            skin: 'yourclass',
                                            content:$('#time'),
                                            end: function() {
                                                $('ul').html(null);
                                            }
                                        });
                                    },
                                    error(res){
                                        layer.msg("defeat", {icon: '5', time: 2000})
                                    }
                                })
                            }
                        })
                    }
                })
            }
        })
    }

    function rTime(date) {
        var json_date = new Date(date).toJSON();
        return new Date(new Date(json_date)).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').substring(0,10);
    }
</script>

</body>
<div id="time" style="display:none;padding-left: 50px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend style="font-size: 30px">物流跟踪</legend>
    </fieldset>
    <ul class="layui-timeline">
    </ul>
</div>
</html>